<template>
<div class="customsDeclarationContract">



  <div class="head">

    <export-excel module-name="documentprocess_cc_customsDeclarationBox" file-name="报关合同.xlsx"></export-excel>


    <div class="tcf-table">
      <div class="tcf-table-in">
        <el-row class="-from">
          <el-col :span="4" class="-to01"></el-col>
          <el-col :span="8">
          </el-col>
          <el-col :span="4" class="-to03"></el-col>
          <el-col :span="8" class="-el-col -to04">
            <div class="bill-of-lading-project-requires -bill-of-lading-project-requires">
              <ul>
                <li>
                  <el-row>
                    <el-col :span="12">
                      <p>Contract No.:</p>
                    </el-col>
                    <el-col :span="12" class="text-left">
                      <input type="text" class="relate-color " @input="handleSimpleInput" :readonly="!editable"  v-model="documentprocess_cc_cdc_contractNO" placeholder="请输入内容" />
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="12">
                      <p>Contract Date:</p>
                    </el-col>
                    <el-col :span="12">
                      <el-date-picker  class="relate-color " value-format="yyyy-MM-dd" @change="selectDate" :disabled="!editable"  type="date" v-model="documentprocess_cc_cdc_contractDate" ></el-date-picker>
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row class="-from">
          <el-col :span="4" class="-to01">
            <p>The Buyer: </p>
          </el-col>
          <el-col :span="20">
            <div class="bill-of-lading-project-requires -bill-of-lading-project-requires -to02">
              <ul>
                <li>
                  <el-row>
                      <input class="relate-color " type="text" @input="handleSimpleInput" :readonly="!editable"  v-model="documentprocess_cc_cdc_buyer" placeholder="请输入内容" />
                  </el-row>
                </li>
                <li>
                  <el-row>
                      <input class="relate-color " type="text" @input="handleSimpleInput" :readonly="!editable"  v-model="documentprocess_cc_cdc_buyerAdd" placeholder="请输入内容" />
                  </el-row>
                </li>
                <li>
                  <el-row>
                      <input  class="relate-color" type="text" @input="handleSimpleInput" :readonly="!editable"  v-model="documentprocess_cc_cdc_buyerTel" placeholder="请输入内容" />
                  </el-row>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row class="-from">
          <el-col :span="4" class="-to01">
            <p>The Seller:</p>
          </el-col>
          <el-col :span="20">
            <div class="-Seller bill-of-lading-project-requires -bill-of-lading-project-requires -to02">
              <ul>
                <li>
                  <p>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
                </li>
                <li>
                  <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
                </li>
                <li>
                  <p>TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA</p>
                </li>
                <li>
                  <p>TEL:+86-10-50911288</p>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="-Seller">
            This Contract is made by and between the Buyer the Sellers: whereby the Buyers agree to buy and the Sellers agree to sell the under mentioned goods subject to the terms and conditions as stipulated hereinafter:
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="-Seller bill-of-lading-project-requires -bill-of-lading-project-requires -to02">
              <ul>
                <li>
                  <p>(1) Name of Commodity and Specifications: </p>
                </li>
                <li>
                   <textarea class="name-text relate-color" type="text" @input="handleSimpleInput" :readonly="!editable"  v-model="documentprocess_cc_cdc_description" placeholder="请输入内容"></textarea>
                </li>
                <li class="quantity-input">
                  <span>(2)  Quantity:</span>
                   <input type="text"  @input="handleSimpleInput" class="hats relate-color"  :readonly="!editable"  v-model="documentprocess_cc_cdc_quantitys" placeholder="请输入内容" />
                   <input type="text" @input="handleSimpleInput" class="hats relate-color"  :readonly="!editable"  v-model="documentprocess_cc_cdc_quantityUnit" placeholder="请输入内容" />
                </li>
                <li>
                  <p>(3) Unit Price: </p>
                </li>
                <li class="special-input quantity-input">
                  <span class="-Total">Total  Value: </span>
                   <input type="text" @input="handleSimpleInput" class="hats relate-color"  :readonly="!editable"  v-model="documentprocess_cc_cdc_amounts" placeholder="请输入内容" />
                   <input type="text" @input="handleSimpleInput" class="hats relate-color"  :readonly="!editable"  v-model="documentprocess_cc_cdc_amounts_usd" placeholder="请输入内容" />
                </li>
                <li>
                  <p>(4) Packing: STANDARD EXPORT PACKING</p>
                </li>
                <li>
                  <p>(5) Country of Origin & Manufacturer: P. R .C</p>
                </li>
                <li>
                  <span>(6)  Terms  of  Payment:</span>
                   <input type="text"  @input="handleSimpleInput" class="hats  term-input relate-color"  :readonly="!editable"  v-model="documentprocess_cc_cdc_payTerms" placeholder="请输入内容" />
                </li>
                <li>
                  <span>(7) Insurance: </span>
                   <input type="text" @input="handleSimpleInput" class="hats  term-input relate-color"  :readonly="!editable"  v-model="documentprocess_cc_cdc_insurance" placeholder="请输入内容" />
                </li>
                <li>
                  <span>(8)  Time  of  Shipment:</span>
                   <el-date-picker class="term-input relate-color"  value-format="yyyy-MM"  format="yyyy/MM" @change="selectDate" :disabled="!editable"  type="date" v-model="documentprocess_cc_cdc_shipDate" ></el-date-picker>
                </li>
                <li>
                  <span>(9)  Port  of  Loading:  </span>
                   <input type="text" @input="handleSimpleInput" class="hats term-input relate-color"  :readonly="!editable"  v-model="documentprocess_cc_cdc_loadPort" placeholder="请输入内容" />
                </li>
                <li>
                  <span>(10)  Shipping Marks: </span>
                   <input type="text" @input="handleSimpleInput" class="hats term-input  relate-color"  :readonly="!editable"  v-model="documentprocess_cc_cdc_marks" placeholder="请输入内容" />
                </li>
                <li>
                  <p>The Seller shall be obliged to have the shipping mark shown as below in addition to the port of destination, package number, gross and net weights, measurements and the other marks as the Buyer may require stenciled or marked conspicuously
                    with fast and unfading pigments on each packages. In the case of dangerous and/or poisonous cargo(s) , the seller is oblige to take care to ensure that the nature and the generally adopted symbol shall be marked conspicuously on each
                    package.</p>
                </li>
                <li>
                  <span>(11)  Port of Destination: </span>
                   <input type="text" @input="handleSimpleInput" class="hats term-input relate-color"  :readonly="!editable"  v-model="documentprocess_cc_cdc_destPort" placeholder="请输入内容" />
                </li>
                <li>
                  <span>(12) Other terms:</span>
                   <input type="text" @input="handleSimpleInput" class="hats term-input relate-color"  :readonly="!editable"  v-model="documentprocess_cc_cdc_otherTerms" placeholder="请输入内容" />
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span class="BUYER">THE BUYER</span><span class="SELLER">THE SELLER</span>
          </el-col>
        </el-row>


      </div>

    </div>



    <div class="upload" id="flow_05_upload">
      <p class="upload-hint">票据/附件</p>
      <div>
        <div class="upload-btn">
          <input type="file"  v-show="editable"  name="file" multiple @change="selectFiles" >
          <el-button :disabled="!editable" type="primary">选择附件</el-button>
        </div>

        <ul class="upload-files">
          <li @mouseover="handleOver(item)"   @mouseout="handleOut(item)" v-for="(item,index) in attachedFiles" :key="index">
            <span @click="download(item.id, $event)">{{item.name}}</span>
            <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
            <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
          </li>
        </ul>
      </div>
    </div>

  </div>

</div>
</template>

<script>
import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js'
import {toFixed} from '@/util/transform.js';
import { handleEmit } from '../common.js'; 

import exportExcel from '../../../common/exportExcel.vue';


export default {
  created(){

    this.keys.forEach(key => {
      this[key] = _.cloneDeep(this.datas[key]);
    });


  },
  mounted(){
    let queryUrl = location.href;
    if (queryUrl.indexOf('flow_05_upload') != -1) {
      setTimeout(()=> {
        let flow_05_upload_top = document.getElementById('flow_05_upload').offsetTop;
        let docEle = document.documentElement || document.body;
        docEle.scrollTop = flow_05_upload_top + 90;
      },10)
    }

    let self = this;

    this.bus.$on('bind-new-ftc', function (ftcData) {
      //关联 外贸合同
      self.documentprocess_cc_cdc_contractNO = ftcData.bf_orderNumber;
      // self.documentprocess_cc_cdc_contractDate = ftcData.bf_orderDate;
      self.documentprocess_cc_cdc_buyer = ftcData.bf_buy_name
      self.documentprocess_cc_cdc_buyerAdd  = ftcData.bf_buy_address;
      self.documentprocess_cc_cdc_buyerTel = ftcData.bf_buy_tel;

      self.documentprocess_cc_cdb_fromPort = ftcData.bf_portOfLoad;
      self.documentprocess_cc_cdb_toPort = ftcData.bf_portOfDestination;
      self.documentprocess_cc_cdb_transport = ftcData.bf_shipment;
      self.documentprocess_cc_cdb_tradeTerms = ftcData.bf_tradeTerm;
      self.documentprocess_cc_cdb_shipMarks = ftcData.bf_shippingMarks;
      self.emitToParent();
    });


    this.bus.$on("documentprocess_cc_customsDeclarationContract-invoiceDate", function(arg){
      self.documentprocess_cc_cdc_contractDate = arg[0];
    });

    this.bus.$on("documentprocess_cc_customsDeclarationContract-description", function(arg){
      self.documentprocess_cc_cdc_description = arg[0];
      self.emitToParent();
    });

    this.bus.$on("documentprocess_cc_customsDeclarationContract-totalpackage", function(arg){
      self.documentprocess_cc_cdc_quantitys = arg[0];
      self.emitToParent();
    });

    this.bus.$on("documentprocess_cc_customsDeclarationContract-mark", function(arg){
      self.documentprocess_cc_cdc_marks = arg[0];
      self.emitToParent();
    });

    this.bus.$on("documentprocess_cc_customsDeclarationContract-totalpackage-unit", function(arg){
      self.documentprocess_cc_cdc_quantityUnit = arg[0];
      self.emitToParent();
    });

    this.bus.$on("documentprocess_cc_customsDeclarationContract-amount", function(arg){
      self.documentprocess_cc_cdc_amounts = arg[0];
      self.emitToParent();
    });

    this.bus.$on("documentprocess_cc_customsDeclarationContract-tradeterms", function(arg){
      self.documentprocess_cc_cdc_payTerms = arg[0];
      self.emitToParent();
    });

    this.bus.$on("documentprocess_cc_customsDeclarationContract-shipdate", function(arg){
      self.documentprocess_cc_cdc_shipDate = arg[0];
      self.emitToParent();
    });

    this.bus.$on("documentprocess_cc_customsDeclarationContract-loadport", function(arg){
      self.documentprocess_cc_cdc_loadPort = arg[0];
      self.emitToParent();
    });

    this.bus.$on("documentprocess_cc_customsDeclarationContract-destport", function(arg){
      self.documentprocess_cc_cdc_destPort = arg[0];
      self.emitToParent();
    });
  },
  updated(){
  },
  methods: {

    /** 
     * 更新数据到单证员报关
     */
    emitToParent(){
      let obj = {};
      this.keys.forEach(key => {
        obj[key] = this[key];
      });

      this.$emit("fromCC", "documentprocess_cc_customsDeclarationContract", obj);
    },

    /**
     * 将对应的数据传递给下一个组件
     * @param {String} eventName  事件名称
     * @param {Array} arg   传递的参数
    */
    emitToNext(eventName, ...arg){
      this.bus.$emit(eventName, arg);
    },

    selectDate(value){
      this.emitToParent();
    },

    handleSimpleInput(){
      this.emitToParent();
    },

    specialInitialProcess() {
      let dom = document.querySelector('.initiatingprocess .routers-ctrl');
      if (dom) {
        dom.style.zIndex = '0';
      }
    },
    selectFiles(event){
      //票据附件
      let self = this;

      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          self.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
        });
        self.emitToParent();
      });
    },
    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.attachedFiles.splice(index, 1);
          this.emitToParent();
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },

  },
  data() {
    return {
      id: '',
      formInstId: '',
      attachedFiles: [],
      documentprocess_cc_cdc_contractNO: '', //合同编号
      documentprocess_cc_cdc_contractDate: '', //签订日期
      documentprocess_cc_cdc_buyer: '', //买方
      documentprocess_cc_cdc_buyerAdd: '', //买方地址
      documentprocess_cc_cdc_buyerTel: '', //买方电话
      documentprocess_cc_cdc_description: '', //产品描述
      documentprocess_cc_cdc_quantitys: '', //产品数量
      documentprocess_cc_cdc_quantityUnit: 'PKGS', //产品数量单位
      documentprocess_cc_cdc_amounts: '', //产品金额
      documentprocess_cc_cdc_amounts_usd: 'USD', //金额单位
      documentprocess_cc_cdc_payTerms: '', //付款方式
      documentprocess_cc_cdc_shipDate: '', //装期
      documentprocess_cc_cdc_loadPort: '', //出发港
      documentprocess_cc_cdc_marks: '', //ship marks
      documentprocess_cc_cdc_destPort: '', //目的港
      documentprocess_cc_cdc_otherTerms: '',//other terms
      documentprocess_cc_cdc_insurance: 'TO BE COVERED BY BUYER ', //insurance,

      keys: [
        "id",
        "formInstId",
        "attachedFiles",
        "documentprocess_cc_cdc_contractNO",
        "documentprocess_cc_cdc_contractDate",
        "documentprocess_cc_cdc_buyer",
        "documentprocess_cc_cdc_buyerAdd",
        "documentprocess_cc_cdc_buyerTel",
        "documentprocess_cc_cdc_description",
        "documentprocess_cc_cdc_quantitys",
        "documentprocess_cc_cdc_quantityUnit",
        "documentprocess_cc_cdc_amounts",
        "documentprocess_cc_cdc_amounts_usd",
        "documentprocess_cc_cdc_payTerms",
        "documentprocess_cc_cdc_shipDate",
        "documentprocess_cc_cdc_loadPort",
        "documentprocess_cc_cdc_marks",
        "documentprocess_cc_cdc_destPort",
        "documentprocess_cc_cdc_otherTerms",
        "documentprocess_cc_cdc_insurance"
      ]
    }
  },
  props: {
    datas: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    },
    bus: {
      type: Object,
      required: true
    }
  },
  watch: {
    datas(newValue, oldValue){
        this.keys.forEach(key => {
          this[key] = _.cloneDeep(newValue[key]);
      });
    }
  },
  components: {
    exportExcel
  }
}
</script>

<style lang="scss" >
.customsDeclarationContract {

    padding: 20px;

    font-size: 15px;
    line-height: 30px;

    p {
      padding: 5px 0;

      span {
        font-weight: bolder;
      }
    }

    .relate-color {
      //background-color: #efa54b36 !important;

      input {
        background-color: transparent !important;
      }
    }

    border: 1px solid #999;
    > h2 {
        text-align: center;
    }

    a {
        color: #409EFF;
    }
    .el-table {
        margin-bottom: 20px;
    }

    .text-left {
      text-align: left !important;
    }

    .head {
        .btns {
            width: 100%;
            height: 40px;
            text-align: center;

            .export {
                float: right;
            }
        }

        .el-date-editor  {
          width: 100%;
        }

        .tcf-table {
            margin-top: 20px;
            padding: 20px;
            box-sizing: border-box;
            h2 {
                text-align: center;
                padding: 10px 0;
            }

            .el-input__inner {
                border: none;
            }

            .tcf-table-title {
                text-align: center;
            }
            .tcf-table-in {
                border-top: 1px solid #e6ebf5;
                .el-row {
                    box-sizing: border-box;
                    border-bottom: 1px solid #e6ebf5;
                    border-left: 1px solid #e6ebf5;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border-right: 1px solid #e6ebf5;
                    padding: 5px;
                }
            }
            .-to01,
            .-to03,
            .-to04 {
                height: 133px;
            }
            .-to04 {
                border-right: 1px solid #e6ebf5 !important;
            }
            .-to02 {
                ul {
                    li {
                        margin-bottom: 1px;
                    }
                }
            }
            .-from {
                .el-col-24 {
                    padding: 0;
                    .el-row {
                        border: none;
                    }
                }
                .el-col-4,
                .el-col-8 {
                    border-right: none;
                }
            }
            .BUYER,
            .SELLER {
                display: inline-block;
                width: 50%;
                text-align: left;
            }
            .-Seller {
                text-align: left !important;
            }
            .el-table {
                margin-top: 20px;
            }
            .el-select {
                width: 100%;
            }
            .-el-col {
                padding: 0 !important;
            }
            .bill-of-lading-project-requires-p {
                height: 392px;
            }
            .special-provisions {
                height: 351px;
            }
            .bill-of-lading-project-requires {
                width: 100%;
                border-bottom: 1px solid #e6ebf5;
                box-sizing: border-box;
                .el-row {
                    box-sizing: border-box;
                    border: none;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border: none;
                }
                .el-col-20 {
                    text-align: left;
                    text-indent: 20px;
                }
                .-el-col {
                    padding: 5px !important;
                    text-indent: 0;
                }
                .hats {
                    width: 10%;
                    margin-right: 5px;
                }

                .hats-other {
                  width: 80%;
                }
                .-Total {
                    margin-left: 18px;
                }

                input {
                  width: 90%;
                  height: 32px;
                  border: 1px solid #e6ebf5;
                  border-radius: 2px;
                }

                .el-date-editor {
                  input {
                    width: 100%;
                  }
                }

                .name-text {
                  width: 90%;
                  height: 50px;
                  border-radius: 2px;
                  border-color: #e6ebf5;
                }

                .quantity-input {
                  input:nth-of-type(1) {
                    width: 30%;
                  }

                  input:nth-of-type(2) {
                    width: 100px;
                  }
                }

                .term-input {
                  width: 30%;
                }

            }
            .-bill-of-lading-project-requires {
                border-bottom: none;
            }
            .sea-freight {
                .el-col {
                    text-align: center;
                    height: 90px;
                    line-height: 90px;
                    box-sizing: border-box;
                }
                .sea-freight-col {
                    line-height: 41px;
                    padding-top: 3px;
                }
            }
            .no-border {
                //   border: none !important;
            }

            .special-row {
                .el-col {
                    height: 25px;
                    line-height: 25px;
                }
            }

        }

        .upload {
          >div {
            border: 1px solid #999;
            padding: 20px 0px 40px 20px;
          }

          .upload-btn {
            position: relative;
            >input {
              opacity: 0;
              width: 100px;
              height: 40px;
              position: absolute;
              top: 0;
              left: 0;
            }
          }

          .upload-files {

              > li {
                  width: 300px;
                  padding: 10px 0;
                  transition: all 0.5s linear;

                  &:hover {

                    >span {
                      color: #409EFF;
                    }
                  }
                }

              font-size: 16px;
              span {
                  padding: 0 10px;
                  cursor: pointer;
                  display: inline;
              }
              span.el-icon-close:hover {
                  cursor: pointer;
              }
          }
          .upload-hint {
            font-size: 20px;
            margin-bottom: 10px;
          }
        }

        .select-orders {

            // padding: 20px 0;

            li {
                padding: 5px 0;
            }
            .order-left {
                float: left;
            }
            .order-right {
                float: right;
            }
        }

    }

    .bind-window {
        .el-form--inline .el-form-item {
            margin-right: 15px;
        }

        td {
            border: 1px solid #e6ebf5;
        }

        td:not(.el-table_1_column_1) {
            width: 120px;
            min-width: 120px;
        }

        .dialog-footer {
            text-align: center;
            button {
                margin-right: 80px;
            }
        }

        a {
            color: #409EFF;
        }

    }
}
</style>
